
<template>
  <div>
    <el-dialog
      ref="eldialog"
      v-bind="$attrs"
      @close="onClose"
      title="欢迎加入线性表学习软件平台"
      v-model="isVisiable"
    >
      <el-form
        ref="elForm"
        :model="formData"
        :rules="rules"
        size="medium"
        label-width="100px"
      >
        <el-form-item label="上传头像" prop="avatar">
          <el-upload
            action
            class="avatar-uploader"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            :http-request="httpRequest"
          >
            <img v-if="formData.avatar" :src="formData.avatar" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
        </el-form-item>
        <el-form-item label="用户名" prop="userName">
          <el-input
            v-model="formData.userName"
            placeholder="请输入用户名"
            clearable
            :style="{ width: '100%' }"
          ></el-input>
        </el-form-item>
        <el-form-item label="昵称" prop="nickName">
          <el-input
            v-model="formData.nickName"
            placeholder="请输入用户名"
            clearable
            :style="{ width: '100%' }"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            v-model="formData.password"
            placeholder="请输入密码"
            clearable
            show-password
            :style="{ width: '100%' }"
          ></el-input>
        </el-form-item>
        <el-form-item label="手机号码" prop="phonenumber">
          <el-input
            v-model="formData.phonenumber"
            placeholder="请输入手机号码"
            clearable
            :style="{ width: '100%' }"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input
            v-model="formData.email"
            placeholder="请输入邮箱"
            clearable
            :style="{ width: '100%' }"
          ></el-input>
        </el-form-item>
        <el-form-item label="学校" prop="school">
          <el-input
            v-model="formData.school"
            placeholder="请输入学校"
            clearable
            :style="{ width: '100%' }"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <el-footer>
        <el-button @click="isVisiable = false">取消</el-button>
        <el-button type="primary" @click="handelConfirm(formData)"
          >注册</el-button
        >
      </el-footer>
    </el-dialog>
  </div>
</template>
<script setup>
import { getCurrentInstance, ref, reactive, onMounted, watchEffect, watch } from 'vue'
import { register } from '../api/login'
import { upload } from '../api/pic'
const inheritAttrs = ref(false)
const props = defineProps({
  isVisiable: false,
  userInfo: []
})

watch(props.userInfo, function (newValue, oldValue) {
  formData.id = newValue.userId;
  formData.userName = newValue.userName;
})

const handleChange = (currentValue, oldValue) => {
  if (currentValue < oldValue) {
    console.log("目前" + currentValue);
    console.log("以前" + oldValue);
    answer.value.pop();
  }
  console.log(currentValue);
};
const handleAvatarSuccess = (res, file) => {
  imageUrl.value = URL.createObjectURL(file.raw)
}
const beforeAvatarUpload = (file) => {
  const isJPG = file.type === "image/jpeg";
  const isLt2M = file.size / 1024 / 1024 < 2;

  if (!isJPG) {
    ElMessage.error("Avatar picture must be JPG format!");
  }
  if (!isLt2M) {
    ElMessage.error("Avatar picture size can not exceed 2MB!");
  }
  return isJPG && isLt2M;
};
/**
 * 上传图片方法
 */
const httpRequest = (file) => {
  const form = new FormData();
  form.append("file", file.file);
  console.log(form);

  upload(form)
    .catch((error) => {
      console.log(error);
    })
    .then((res) => {
      console.log(res);

      formData.avatar = res.data.url;
    });
}
const formData = reactive({
  id: null,
  avatar: null,
  userName: undefined,
  nickName: undefined,
  password: undefined,
  phonenumber: undefined,
  email: undefined,
  school: undefined,
})
const rules = ref({
  avatar: [{
    required: false
  }],
  userName: [{
    required: true,
    message: '请输入用户名',
    trigger: 'blur'
  }],
  nickName: [{
    required: true,
    message: '请输入昵称',
    trigger: 'blur'
  }],
  password: [{
    required: true,
    message: '请输入密码',
    trigger: 'blur'
  }],
  phonenumber: [{
    required: true,
    message: '请输入手机号码',
    trigger: 'blur'
  }],
  email: [{
    required: true,
    message: '请输入邮箱',
    trigger: 'blur'
  }],
  school: [],
}


)

const avatarAction = ref('https://jsonplaceholder.typicode.com/posts/')
const avatarfileList = ref([])
const { proxy } = getCurrentInstance()
function onClose () {
  proxy.$refs["elForm"].resetFields()
  location.reload()
}
function close () {
  proxy.$emit('update:visible', false)

}
function handelConfirm () {

  proxy.$refs.elForm.validate(valid => {
    if (!valid) return
    console.log(this.formData)
    register(this.formData)
    this.close()
  })
}
function avatarBeforeUpload (file) {
  let isRightSize = file.size / 1024 / 1024 < 2
  if (!isRightSize) {
    this.$message.error('文件大小超过 2MB')
  }
  return isRightSize
}



</script>
<style>
.el-upload__tip {
  line-height: 1.2;
}
</style>
